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Abstract. Scalable Vector Graphics (SVG) represents the well-known 
standard used for description of two-dimensional vector graphics in the 
world of web technologies. This paper tries to sketch out the possibilities of 
SVG in cartography. The cartographic potential of SVG is supported by par- 
ticular SVG drawing elements and their attributes, that are able to cover 
requirements on map symbols and their parametrization by graphical vari- 
ables. There are also another properties of SVG important for cartography 
and map making - transformations, grouping of elements, labeling or sup- 
port of various types of multimedia (sound, animation, raster graphics). It 
is also necessary to emphasize other very important characteristics of SVG 
- it is completely open standard and technology (from views of license, ac- 
cessibility, extensibility etc.). This paper describes not only particular part 
of SVG standard, but also selected libraries working with SVG maps and 
some examples of implementation of SVG in the Geomatics section in the 
University of West Bohemia in Plzen (Czech Republic). 
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Introduction 

The development of the format Scalable Vector Graphics (SVG) started 
around the year 1999. It was based on existing formats of vector graphics 
connected to the format Extensible Markup Language (XM l_). The first SVG 
standard (version 10) was published in 2001 1 n the half of the first decade 
of 21 st century the SVG format was viewed with distrust. Many experts (not 
only in cartography) started to exploit similar technologies such as Adobe 
Flash. 

There are two main reasons for the revival of SVG format and related tech- 
nologies: 



1 While applications for computers used another formats, the mobile tech- 
nologies were still focused on SVG, because it has been simple and open. 
Also devices with low performance (eg. mobile phones) have been able to 
process SVG graphics. 

2. SVG was i ncorporated to the set of technologies related to HTML 5. SVG 
represents the part of HTM L 5 focused on 2D vector graphi cs. 1 1 means new 
opportunity- many web pages and multimedia applications connected with 
SVG which will be based on HTML 5. 

The contemporary SVG brings a chance for cartographers to interconnect 
the actual trend (HTML 5 technologies) with cartography, its product and 
research. Moreover SVG (thanks to its properties) can solve questions con- 
nected with maps on the I nternet such as reliance on proprietary libraries 
or incompatibility. 

This article should introduce SVG, describe its cartographic potential and 
show selected application in cartography. It is divided into three main sec- 
tions. The important properties and specifics of SVG format (including his- 
tory and relations to other technologies and standards) are described in the 
part "Introduction to SVG". The section "Cartographic Potential of SVG" 
introduces particular elements of SVG standard and shows their opportuni- 
ties in a process of map construction and presentation. Following part of 
this paper calls "Examples of SVG Maps". It is focused on various examples 
of maps in SVG format that were developed in the projects of Geomatics 
Secti on of the U ni versity of West Bohemia in Plzen (Czech Republic). 



Scalable Vector Graphics 
1.1 Introduction to SVG 

The acronym SVG stands for Scalable Vector Graphics. It is an XML-based 
format for two-dimensional graphics. SVG represents a subset (with specif- 
ic elements and attributes) of general XML (Extensible Markup Language). 
The SVG standard is managed by World Wide Web Consortium (W3C) and 
its SVG Working Group (http://www.w3.org/Graphics/SVG/) that also 
publishes SVG standard document (Dahlstrom et al., 2011). The schemes 
for a validation of SVG documents are also found in SVG standard as DTD 
(Document TypeDefiniti on) and W3CXML Scheme files. 

The development of SVG started around 1999. The experts of W3C re-used 
experience of older vector formats based on XML - VML (Vector Markup 
Language) and PGML (Precision Graphics Markup Language) that were 
coordinated by commercial companies such as Microsoft or Autodesk 



(VML) or Adobe and IBM (PGM L). The first SVG standard was published in 
2001 The current version of SVG is called asll(Dahlstrbmetal., 2011). 

According to SVG Working Group (as the main development and manage- 
ment body) the second version of SVG (SVG 2.0) is under development. It 
will add new features to SVG, as well as more closely integrating with 
HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and 
the DOM (Document Object Model). 

The SVG document is (just as any XML document as well as HTML) a plain 
text composed of particular elements organized to a tree structure with the 
root element <svg>. The relation with another standards based on XML 
and the principle of scripting and linking ensures interconnections with 
many web technologies such as HTML, ECMA (European Computer Manu- 
facturers Association) script, DOM, CSS, XPath (XML Path Language), 
XSLT (Extensible Stylesheet Language - Transformation) or multimedia 
files. Because of plain text format a SVG document is editable in any text 
editor being ableto process ASCI I (American Standard Code for I nformati- 
on Interchange) document (from simple tools like NotePad to advanced 
code and/ or WYSI WYG software packages I i ke E macs or I nkscape) . 

Relation to XML and HTML facilitates the viewing of SVG graphics. For- 
merly the plug- in modules of web page browsers were necessary. Now there 
is a native support. The table published on Wikipedia 
(http://en.wi ki pedi a.org/ wi ki/ Comparison_ of_ layout_ engi nes_ %28SVG% 
29) shows a compatibility of particular web browser engines. The main web 
browser producers (Google, Mozilla Foundation, Microsoft or Apple) sup- 
port the essenti al SVG el ements. 

Many publication compares SVG format and other similar technologies 
(VML, PGML, Flash...). Perspectives of cartographers are captured in Neu- 
mann & Winter (2001) or Becker (2009) - focused on Flash as the main 
rival of SVG. 

1.2 SVG and HTML 5 

The world of web technologies and the Internet was in last years supple- 
mented by thefifth version of Hypertext Markup Language (HTML). Devel- 
opment of HTML 5 started in 2007 and both organizations responsible for 
the course of development (W3C and WHATWG - Web Hypertext Applica- 
tion Technology Working Group) expect the completion of standard in 
2022. 

The HTML 5 does not have any official specification up to now (except 
WHATWG living standard edited by Ian Hickson; 
http://whatwg.org/html). W3C has published just the documents related to 



HTML5 as W3C Working Drafts. The plan announced in September 2012 
( http:/ / dev. w3. org/ html 5/ deci si on- pol i cy/ html 5- 20 14- pi an . html ) de- 
scribes the progress of development and version HTML 5.1 (W3C Recom- 
mendation in 2016) and 5.2. Originally authors do not suppose any new 
version upgrades. 

The HTML 5 represents very important milestone in the development of 
web pages becauseit interconnects thelanguage describing particular parts 
of web pages (including SVG) with style language (CSS, version 3), script 
languages (ECMA script), multimedia and other components (eg. various 
Application Programming I nterfaces). 

HTML 5 brings many improvements to previous HTML versions such as 
support of semantics (including microdata formats), combination of differ- 
ent markup languages, multimedia support, Local & Session Storage, geolo- 
cati on, offl i ne appl i cati ons or web databases. 

HTML 5 has not been designed just for programmers and coders. Also car- 
tographers can exploit benefits of HTML 5, above all the relation among 
web page components, graphics (Canvas and SVG as graphics tools for 
HTML) and interactive tools managed by scripts. 

Combination of HTML 5, SVG and other components allows to develop 
map without advanced map libraries. It enables to create sophisticated map 
outputs (eg. complicated thematic and statistic maps) that cannot be 
formed in map libraries and by similar tools. 



Cartographic Potential of SVG 

This part of the paper describes SVG format from the view of cartography. 
It means a list of selected SVG elements that could be very helpful during a 
process of map application development such as possibilities of spatial data 
migration to SVG, transformation of graphics or defining user's symbols. 
This section describes fundamental graphical elements, their parametriza- 
tion and labeling and tools for another operations (transformation, script- 
ing, graphical features /gradient, masking etc./). This part of the articles is 
based on Eisenberg, 2002 and Dahlstrom et al., 2011 

The cartographic potential of SVG was mentioned in many various re- 
sources. As far back as in 2001 the capabilities of SVG in cartography were 
described in Neumann & Winter (2001) published in International Carto- 
graphic Conference in Beijing, China. These authors also have been cooper- 
ated on carto:net project and web site (www.carto.net). These web pages 
contain many examples, fragments of code and links to articles focused on 
SVG in cartography. 



Other research of relation of SVG format and cartography is mainly focused 
on concrete case studies showing particular cartographic solutions based on 
SVG. From the large quantity of various materials it is possible to select 
a paper describing an interconnection of SVG and WMS (Web Map Service) 
standard (Kobben, 2007), design of server solution based on SVG (Neu- 
mann & Jenny, 2007), article solving question of labeling SVG maps 
(Kulyukin, V. et al., 2010), works of the author of this article focused on a 
generation of maps in SVG format via XSLT styles and SVG cartographic 
products such as Atlas of I nternational Relationships or maps for the Visu- 
alHealth project (Cerba, 2008, Cerba, 2010a, Cerba, 2010b, Cerba & 
Cepicky, 2012). Some of articles about SVG applications contain also a gen- 
eral description of SVG (e.g. Hedge, 2004 or Becker, 2009). 

There is a huge number of various publications focused on interconnection 
between cartography and SVG format. The broad scope of publications and 
ways of research support the i importance of SVG i n cartography. 

2.1 SVG Drawing Tools 

The drawing tools are divided into two groups. SVG contains elements of 
basic graphical primitives such as lines, polylines, polygons, circles, ellipses 
or rectangles. The coding of these symbols is summarized and shortly de- 
scribed in table 3-1 (Table of shape elements) in Eisenberg, 2002. The sim- 
ple map symbols of geometric character can be created with using of these 
features. They are usually not very suitable for drawing complicated com- 
posed shapes (e.g. areal symbols in choropleth maps or cartograms). They 
are not used in a process of generating of SVG from spatial data (details of 
the process of generating SVG maps in Cerba, 2008, Cerba, 2010a, Cerba, 
2010b, and Cerba & Cepicky, 2012), because the description of parameters 
(elements and attributes) is specific for each element. 

SVG standard contains more universal drawing element. It calls <path> 
and isableto create any graphic feature with using a list of coordinates and 
si mpl e commands represented by one I etter . The commands are i ncl uded i n 
list of coordinates that is content of attribute d. The element <path> uses 
following commands - M (moving of drawing tool), L (line), H (horizontal 
line), V (vertical line), and Z (closing of polygon). Users can also deal with 
advanced commands such as A (elliptical arc), Q (Quadratic Bezier's curve), 
T (Smooth quadratic Bezier's curves), C (Cubic Bezier's curve), S and 
(Smooth cubic Bezier's curves). These features are focused mainly on gen- 
eral graphics and they are not used in cartography very often. The element 
<path> is able to work with absolute (commands are written as upper cas- 
es) and relative (commands are written as upper cases) coordinates as well 
as usi ng a compressed form of codi ng. 



2.2 Other SVG elements 

Above-mentioned elements represent corner-stones of each SVG graphics, 
including maps and other cartographic products. The drawn primitives and 
"paths" can be modified and supplemented in various ways by transfor- 
mation, grouping, labeling, adding raster graphics, graphical features (fil- 
ters, gradients, patterns...), animations, scripting and interactivity. 

The transformations and work with coordinate system is the crucial activity 
of a development of a map in SVG format. SVG uses the coordinate system 
of graphics with the origin in top left corner of a draw. Unfortunately this 
approach is not useful for most cartographic activities. Cartographers need 
to use transformation attribute to adjust to original data coordinate system. 

Users can define not only a size of a picture (or map) but also its segmenta- 
tion. Following fragment of code shows the SVG document with height 
10cm and width 20cm. The canvas of SVG document is divided into 300 
pixels (height) and 600 pixels (width). The origin of axes starts in point 
1000,1000. 

<svg width ="20cm" height^'lOcm" viewBox^'1000 1000 600 300"> 



I n some cases it is necessary also to change directions of axes. Users can 
apply the attribute transform. SVG enables four types of transformations - 
translation, rotation, change of scale size and skew. Transformations can be 
composed in content of transform attribute or SVG can deal with affine 9- 
el ements transf or mati on matr i x. 

The best practice how to use transformations is to prepare as many as pos- 
sible features of map out of the canvas and than to transform them to the 
right position and scale. Unfortunately it is not possible to use this type of 
transformation for labels and composed symbols of map. 

The grouping is also very useful in cartography. It can be used in various 
ways: 

• The same styling of more elements (using the same graphics varia- 
bles for more map symbols). 

• Definition of composed cartographic symbols that can be described 
only onetime and applied manytimes. 

• Transf ormati ons of parti cul ar part of map. 

SVG offers three grouping elements - <g> - creating of group of SVG ele- 
ments that can be affected by the same attributes, <defs>- common defini- 
tions and <symbol>- definition of graphics that is used in map repeatedly 



(with possibility of changing their attributes such as color or size). The ele- 
ment <symbol> is able to work with its own coordinate system and view 
box. Predefined parts of map are included to draw by element <use> and 
attribute xlink:href that contains URI (Uniform Resource Identifier) of el- 
ement. 

Text elements are important for any map, but the text processing ranks 
among the shortcomings of SVG standard. There are some limits that must 
betaken into consideration. The main restriction consists in missing possi- 
bilities of working with paragraphs (line wrapping). Cartographers can re- 
duce this restriction by combination of SVG and HTML, because para- 
graphs are not usually a part of map drawing, but they just complete the 
map as additional components. 

Label of map symbols are realized by the element <text>. Its behavior can 
be affected by various attributes. They specify position, alignment, outlin- 
ing, family of fonts, size, weight, underlining, word or letter spacing. The 
<tspan> element enables a modification of text direction, including follow- 
ing a curve or applying to shapes (text along a path). This property is very 
helpful in the process of I abel i ng of water f I ows or mountai n ranges. 

Because SVG is a subset of XML standard, it support UTF (UCS Transfor- 
mation Format) encoding of characters. It means that SVG is able to deal 
with any type of al phabet. 

SVG contains many other graphical elements that can make a map more 
attractive. There are graphic filters (used for example for adding shadows or 
lighting effects to map symbols, including text labels, for changing of color 
schemes or for combination of rasters and vector graphics). The particular 
parts of map do not need to be covered just by single color. User can im- 
plement patterns, linear or radial gradient (transition among two or more 
col ors) . 1 1 i s al so possi bl e to use masks or cl i ps. 

SVG does not mean just a static vector map. SVG has various possibilities of 
features related to animations and interactivity. Animations in SVG are 
based on another W3C standard - Synchronized Multimedia Integration 
Language (SMIL). It allows adding an animation element to any SVG fea- 
ture. SVG is able to animate a change of colors, size, orientation (through 
animation of transformation) and motion. Animation elements work with 
many attributes being able to define essential properties of animation (e.g. 
starting and ending time of animation, duration or repetition). 

The interactivity (a possibility to influence a visualization by user) repre- 
sents the second main attribute of dynamic maps. SVG (similarly to other 
XML-based format) uses ECMA script (known also asj ava script). It ranks 



among the most important web technologies. ECM A script allows (together 
with DOM ) to define any processing of any SVG element. 

2.3 SVG Libraries 

The drawing of map in SVG by writing a code or drawing in some editor is 
very difficult, slow and inefficient. Therefore there are technologies that are 
able to transform spatial data as well as attribute data to the form of SVG 
map by automated way. 

The next chapter and publications (Cerba, 2008, Cerba, 2010a, Cerba, 
2010b and Cerba & Cepicky, 2012) show possibilities of XSLT i n the process 
of generation of SVG maps. The another way how to create a SVG map is to 
use a library based on ECMA script (or any other script language) and to 
i ncl ude the scri pt to web page. 

The library Polymaps (http://polymaps.org/) represents such ECMA script 
I i brary usi ng SVG. 1 1 al I ows anybody to create any vector graphi cs i ncl udi ng 
maps. Polymaps support not only raster tiles but also a vector tiles in SVG 
(via Geo] SON - open format for encoding geographic data). 

The jVectorMap (http://jvectormap.com) is also based on ECMA script. It 
does not use any proprietary format (eg. Flash), but it support except SVG 
also VML format. Users can download not only script files but also prede- 
fined maps (or data) of selected countries and apply mapping techniques 
(choropleth, proportional symbols). The jVectorMap allows anybody to 
work with selected projection (eg. Mercator projection or Lambert Con- 
formal Conic Projection). 

D3 (http://d3js.org/) means Data-Driven Documents. It is also ECMA 
script library using HTML, CSS and SVG. 1 1 serves as a tools for a visual iza- 
ti on of data, i ncl udi ng spati al data. The gal I ery of the proj ect contai ns some 
cartographic products such as choropleth maps, proportional symbol maps 
or non-continuous cartograms. But the portfolio of visualization methods is 
broader (eg. vari ous types of graphs, charts or di agrams) . 

Google Chart Tools represents one of the not much known service or prod- 
uct of Google company. It can be attached to the web page by ECMA script. 
The visualization is based on SVG or VM L. Google Chart Tools are divided 
into particular instruments such asGoogleGeochartthatallowsthe users to 
work with maps and spatial data. The Interactive World Maps (a plugin for 
WordPress) are also based on Google Geochart. 

The Raphael —J avaScript Library (http://raphaeljs.com/) is very similar to 
D3 library. It offers a huge number of various visualization techniques, in- 
cl udi ng maps. 1 1 uses SVG as wel I as VM L format. 



The set of ECMA script libraries is very numerous and contains many other 
products I i ke SVGM ap. 



Case Studies - SVG in Geomatics section of the Uni- 
versity of West Bohemia 

This sub-chapter shows selected applications of SVG format in cartographic 
activities of Geomatics section of the University of West Bohemia,. These 
activities could be divided into three main groups - classes of Computer 
Cartography, final thesis of students and projects. 

The course Computer Cartography is intended mainly for students of car- 
tography specialization of geomatics. It is based on processing spatial data 
set by XSLT templates and processor and their presentation in a form of 
thematic maps in SVG format. Lectures of SVG format and its cartographic 
potential account for the important part of this course. The workshop 
"HTML 5, CSS 3 & SVG 11 in Cartography" 
(gis.zcu.cz/tmp/Workshop/Workshop_v2.pdf), that was presented in the 
The I nternet and Geospatial Technologies: A workshop jointly supported by 
the I CA Commi ssi on on M aps and the I nternet and the I CA Commi ssi on on 
Open Source Geospatial Technologies In conjunction with AutoCarto 2012 
as well as in the University of Nebraska in Omaha, is also a part of the 
course of Computer Cartography. 

SVG is used also in many final thesis of students of geomatics. They use 
SVG as a tool for visualization of particular task such as interactive map of 
the railway network in the Czech Republic, multimedia representation of 
the oldest map of Bohemia, modelling of changes of electoral districts and 
their effect on results of elections, multimedia plan of Komarno city (Slo- 
vakia) or possibilities of SVG in cartographic visualization of dynamic phe- 
nomenons. 

SVG format was also used in two projects with a participation of Geomatics 
section. The Atlas of International Relationships (Waisova et al., 2007) rep- 
resents the traditional printed cartographic publication, but the maps were 
constructed in SVG (via XSLT transformation) and after that converted to 
PDF (Portable Document Format) format. The project VisualHealth was 
focused on a support of prevention of selected diseases through cartograph- 
ic products. There were used various approaches how to build fitting maps 
including thematic maps in SVG format (Cerba, 2010b). 



Conclusion 



SVG format has very diverse using in cartography. It can used in "tradition- 
al" cartography to final editing of maps. For example SVG format is used in 
the Geomatics section of the University of West Bohemia to finalize the 
maps generated in GIS software. Such maps are modified in open-source 
vector graphics editor Inkscape (with using SVG format), transformed to 
PDF and printed or archived. 

The cartographic potential of SVG is important for connection with digital 
maps above all interconnecting vector graphics, rasters, text elements, mul- 
timedia and interactive components. This paper summarizes essential car- 
tographic capabilities of SVG (parts 2.1 and 2.2) and shows libraries appli- 
cable to digital maps construction (part 2.3) and examples of SVG using 
(part 3). 

The number of various applications, research articles and SVG maps sup- 
port the importance and significance of SVG in cartography. It documents 
also the interest in courses and workshops focused on SVG and related 
technologies. 

SVG maps and cartographic applications cannot substitute (and even do not 
want to substitute) other ways of building of digital and multimedia maps. 
They represent one alternative that is applicable in some specific cases such 
as web statistic and thematic maps, solution for mobile devices or carto- 
graphic products with specific and unique graphic design. 
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